<template>
  <view class="container">
    <image class="bg" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/has_bg.png" mode="scaleToFill" />
    <view class="has_bg">
      <view class="header">
        <view class="avator">
          <image :src="userInfo.avator"></image>
        </view>
        <view class="info" v-if="true">
          <view class="name">{{ userInfo.name }}</view>
          <view class="lv">
            <image src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/badge.png" mode="scaleToFill" />
            <text>Lv.{{ userInfo.lv }}能量王者 ></text>
            <view class="point"></view>
          </view>
        </view>

        <view class="info_main" v-else @click="toPage('pages/login/index')">
          <view class="info_phone"> 登录/注册 </view>
          <view class="info_cate">
            <view class="info_text"> 立即登录 </view>
          </view>
        </view>
      </view>
      <view class="des">
        <image
          class="des-img"
          src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des.png"
          mode="scaleToFill"
        />
        <view class="auth">
          <view class="title">您可享6项权益~</view>
          <view class="btn">
            <text>查看更多></text>
          </view>
        </view>
        <view class="des-box">
          <view class="item" v-for="(item, index) in des" :key="index">
            <image :src="item.img"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>

      <view class="order">
        <view class="routes">
          <view class="route" v-for="(item, index) in orderRoutes" :key="index">
            <image :src="item.img"></image>
            <view class="label">
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="func">
        <view class="routes">
          <view class="route" v-for="(item, index) in funcRoutes" :key="index">
            <image :class="'img' + index" :src="item.img"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkLogin } from "@/core/app";
export default {
  data() {
    return {
      isLogin: false,
      userInfo: {
        avator: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_avator.png",
        name: "王老师",
        lv: 3,
      },
      des: [
        { label: "专属价格", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_price.png" },
        { label: "优先体验", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_flag.png" },
        { label: "后台管理", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_m.png" },
      ],
      orderRoutes: [
        { label: "研学/待出发", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon1.png" },
        { label: "文创/待发货", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon2.png" },
        { label: "文创/待收货", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon3.png" },
        { label: "师训/待学习", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon4.png" },
        { label: "全部订单", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon4.png" },
      ],
      funcRoutes: [
        { label: "客户分析", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func1.png" },
        { label: "宣传物料", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func2.png" },
        { label: "每日任务", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func3.png" },
        { label: "每月计划", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func4.png" },
        { label: "总部指导", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func5.png" },
        { label: "合同管理", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func6.png" },
        { label: "我的伙伴", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func7.png" },
        { label: "我的奖金", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func8.png" },
        { label: "一键绑定", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func9.png" },
        { label: "关于我们", img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/func10.png" },
      ],
    };
  },
  onShow() {
    this.onRefreshPage();
    this.getInfo();
  },
  methods: {
    toPage(url) {
      this.$navTo(url);
    },
    toScore() {
      this.toPage("pagesA/school/input_score/input_score");
    },
    // 刷新页面
    onRefreshPage() {
      // 判断是否已登录
      this.isLogin = checkLogin();
      // 获取页面数据
      // this.getPageData()
      console.log(this.isLogin, "isLogin");
    },
    getInfo() {
      Api.getScoreInfo({}).then((res) => {
        if (res.code == 200) {
          this.scoreInfo = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    hidePhone(str) {
      return str && str.length && str.length == 11 && str.slice(0, 4) + "****" + str.slice(7, 11);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;

  .bg {
    width: 100%;
    height: 660rpx;
    position: absolute;
    top: 0;
  }
  .has_bg {
    position: relative;
  }

  .header {
    display: flex;
    padding: 154rpx 20rpx 20rpx 20rpx;

    .avator {
      width: 138rpx;
      height: 138rpx;
      border-radius: 138rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 20rpx;

      .name {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        margin-top: 24rpx;
        line-height: 46rpx;
      }

      .lv {
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        width: 308rpx;
        height: 48rpx;
        background: #ffffff;
        border-radius: 24rpx;

        image {
          width: 66rpx;
          height: 62rpx !important;
          margin-right: 10rpx;
        }

        .point {
          width: 12rpx;
          height: 12rpx;
          background: #f95513;
          border-radius: 50%;
          margin-left: 6rpx;
        }
      }
    }
  }

  .des {
    position: relative;
    .auth {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 500rpx;
      top: 48rpx;
      left: 166rpx;
      .title {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 40rpx;
        color: #000000;
      }

      .btn {
        width: 132rpx;
        height: 48rpx;
        background: #73ff15;
        border-radius: 22rpx;
        border: 2px solid #000000;
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        text {
          transform: scale(0.83333);
          display: block;
          line-height: 24rpx;
        }
      }
    }
    .des-img {
      width: 100%;
      height: 204rpx;
    }

    .des-box {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 28rpx;
      width: 100%;
      .item:not(:last-child) {
        margin-right: 24rpx;
      }
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 174rpx;
        height: 46rpx;
        background: #cdff8c;
        border-radius: 22rpx;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 12rpx;
        }

        .label {
          font-family: HarmonyOS Sans SC;
          font-size: 24rpx;
          color: #000000;
        }
      }
    }
  }

  .order {
    padding: 40rpx 22rpx 24rpx 22rpx;
    width: 702rpx;
    height: 176rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx auto 0 auto;
    .title {
      font-size: 32rpx;
      color: #333;
    }

    .routes {
      display: flex;
      flex-wrap: wrap;

      .route {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        image {
          width: 62rpx;
          height: 62rpx;
        }

        .label {
          font-family: HarmonyOS Sans SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #000000;
          margin-top: 30rpx;
          text {
            transform: scale(0.83333);
            line-height: 24rpx;
            display: block;
          }
        }
      }
    }
  }

  .func {
    width: 702rpx;
    height: 370rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx auto 0 auto;
    padding: 38rpx 30rpx 38rpx 30rpx;
    .title {
      font-size: 32rpx;
      color: #333;
    }

    .routes {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      row-gap: 72rpx;

      .route {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        image {
          width: 60rpx;
          height: 60rpx;
        }
        .img9 {
          width: 100rpx;
          height: 48rpx;
          margin-top: 12rpx;
        }
        .label {
          font-size: 24rpx;
          color: #666;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
